<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<jsp:directive.page import="webservices.helper.Helper"/>
<html>
<body>
	<div id="main">
		<jsp:include page="banner.jsp">
			<jsp:param name="page" value="courseDetail" />
			<jsp:param name="courseName" value="<%=request.getParameter(\"name\")%>" />
		</jsp:include>
		<div id="slide" style="margin-top:50px"></div>
		<div id="msg" style="margin-top:50px"></div>
	</div>
</body>
<style>
#main {
	width: 800px;
	margin: auto;
	position: relative;
}

#main table,
#main td,
#main th {
	border: 1px solid gray;
	border-collapse: collapse;
	text-align: center;
}

.header {
	text-align: center;
	margin: 50px auto 20px;
}

#main table {
	width: 100%;
	table-layout: fixed;
}
#main td {
	padding: 2px;
}

#msgForm td {
	border: 0;
}


</style>
<script>
var courseID = <%="'" + request.getParameter("courseID") + "'" %>;

function submitMessage(tableNode){
	var content = tableNode.rows[0].cells[1].firstChild.value;
	content = content.replace(/'/, "\\'").replace(/"/, '\\"');
	
	
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "servlet/MessageManage", false);
	
	var params = 'content=' + encodeURIComponent(content) + '&';
	params += 'courseID=' + courseID;
	
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	xhr.onreadystatechange = function(){
		if (xhr.readyState==4 && xhr.status==200) {
			console.log(xhr.responseText);
			loadData();
		}
	};
	
	xhr.send(params);
}

var flag = false;

function renderMessages(data){
	var ctrlHTML = '<button onclick="flag = !flag; document.getElementById(\'msgForm\').style.display=flag?\'table\' : \'none\'; this.innerHTML = flag ? \'收起\':\'我要留言\'">我要留言</button>';
	ctrlHTML += '<table id="msgForm" style="display:none;width:500px;border:1px solid lightgray;">';
	ctrlHTML += '<colgroup><col width="50px"><col width="450px"></colgroup>';
	//ctrlHTML += '<tr><td>主题</td><td style="padding:5px;"><input style="width:100%" name="subject"></td></tr>';
	ctrlHTML += '<tr><td>内容</td><td style="padding:5px;"><textarea style="width:100%;height:120px" name="content"></textarea></td></tr>';
	ctrlHTML += '<tr><td colspan="2" style="text-align:right"><button onclick="submitMessage(this.parentNode.parentNode.parentNode); flag = !flag">提交</button></td></tr>';
	ctrlHTML += '</form></table>';

	var tableHTML = '<table>';
	tableHTML += '<colgroup><col width="15%"><col width="15%"><col width="70%"></colgroup>';
	for (var i = 0; i < data.length; i++ ){
		tableHTML += '<tr>';
		//tableHTML += '<td>' + data[i].subject + '</td>';
		tableHTML += '<td>' + data[i].userName + '</td>';
		tableHTML += '<td>' + data[i].createTime + '</td>';
		tableHTML += '<td>' + data[i].content + '</td>';
		tableHTML += '</tr>';
	}
	tableHTML += '</table>';
	
	return ctrlHTML + tableHTML;
}

function renderSlides(data){
	var tableHTML = '';
	
	<% if ("teacher".equalsIgnoreCase((String)request.getSession().getAttribute("identity"))){ %>
	var manageURL = [];
	manageURL.push('slidemanage.jsp?courseID=', courseID, '&courseName=', <%="'" + Helper.decodeUtf8(request.getParameter("name")) + "'" %>);
	tableHTML += '<a style="float:left;" href="' + manageURL.join("") + '">进入管理</a>';
	<% } %>
	
	tableHTML += '<table>';
	tableHTML += '<colgroup><col width="5%"><col width="20%"><col width="50%"><col width="25%"></colgroup>';
	tableHTML += '<tr><th>#</th><th>课件名称</th><th>描述</th><th>文件</th></tr>';
	for (var i = 0; i < data.length; i++ ){
		tableHTML += '<tr>';
		tableHTML += '<td>' + data[i].slideID + '</td>';
		tableHTML += '<td>' + data[i].name + '</td>';
		tableHTML += '<td>' + data[i].description + '</td>';
		tableHTML += '<td><a target="_blank" href="servlet/DownloadSlide?link='+encodeURIComponent(data[i].link)+'&slideID=' + data[i].slideID + '">下载</a></td>';
		tableHTML += '</tr>';
	}
	if (data.length == 0){
		tableHTML += '<tr><td colspan="5">无课件信息</td></tr>';
	}
	tableHTML += '</table>';
	
	return tableHTML;
}

function loadData(){
	var courseID = <%="'" + request.getParameter("courseID") + "'" %>,
		name = <%="'" + Helper.decodeUtf8(request.getParameter("name")) + "'" %>;
	
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "servlet/CourseDetail?courseID=" + courseID, false);
	xhr.send(null);
	var details = eval('(' + xhr.responseText + ')');
		
	document.getElementById('slide').innerHTML = '<h2 style="margin:auto;text-align: center;">课件列表</h2>' + renderSlides(details.slides);
	
	document.getElementById('msg').innerHTML = '<h2 style="margin: auto;text-align: center;">留言板</h2>' + renderMessages(details.messages);
};

window.onload = function(){
	loadData();
};

</script>
</html>